@import "../assets/fonts/icons-bbogota/styles.css";@-webkit-keyframes bounce_circularG {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(.3);
        opacity: .3
    }
}

@keyframes bounce_circularG {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(.3);
        opacity: .3
    }
}

@font-face {
    src: url(../assets/fonts/Montserrat-Regular.otf) format("otf");
    src: url(../assets/fonts/Montserrat-Regular.otf) format("opentype");
    font-family: "Monserrat";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    src: url(../assets/fonts/Montserrat-Medium.otf) format("otf");
    src: url(../assets/fonts/Montserrat-Medium.otf) format("opentype");
    font-family: "Monserrat";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    src: url(../assets/fonts/Montserrat-SemiBold.otf) format("otf");
    src: url(../assets/fonts/Montserrat-SemiBold.otf) format("opentype");
    font-family: "Monserrat-bold";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

.btn-main {
    border-radius: 10rem;
    background: #0040a8;
    border: 1px solid #0040a8;
    color: #fff;
    min-width: 15rem;
    height: 5rem;
    padding: 1rem;
    outline: 0;
    font-size: 1.5rem;
    cursor: pointer
}

.btn-main :active,.btn-main:focus {
    outline: 0;
    border: 0
}

.btn-main:hover {
    background: #006dcd
}

.btn-main button[disabled],.btn-main.disabled,.btn-main:disabled {
    outline: 0;
    background: #eee;
    color: #959595;
    border-color: #959595;
    cursor: not-allowed
}

@media only screen and (max-width: 37.5em) {
    .btn-main {
        height:4rem
    }
}

.collapsable,.collapsable .collapse {
    display: flex;
    justify-content: center;
    width: 100%
}

.collapsable {
    align-items: center;
    padding: .5rem 4rem
}

.collapsable .collapse {
    flex-direction: column;
    padding: 2rem 1rem;
    border-bottom: .2rem solid rgba(194,194,194,.2);
    color: #f6f8fa
}

@media only screen and (max-width: 56.25em) {
    .collapsable .collapse {
        padding:1.2rem
    }
}

@media only screen and (max-width: 37.5em) {
    .collapsable .collapse {
        padding:.7rem
    }
}

.collapsable .collapse__header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.collapsable .collapse__header--text {
    display: flex;
    font-size: 2rem;
    font-weight: 400
}

@media only screen and (max-width: 56.25em) {
    .collapsable .collapse__header--text {
        font-size:1.8rem
    }
}

@media only screen and (max-width: 37.5em) {
    .collapsable .collapse__header--text {
        font-size:1.5rem
    }
}

.collapsable .collapse__header--btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    font-size: 2.8rem;
    background: #0040a8;
    padding-top: .8rem;
    cursor: pointer
}

@media only screen and (max-width: 56.25em) {
    .collapsable .collapse__header--btn {
        width:3.2rem;
        height: 3.2rem;
        font-size: 2.2rem;
        padding-top: .5rem
    }
}

@media only screen and (max-width: 37.5em) {
    .collapsable .collapse__header--btn {
        width:3rem;
        height: 3rem;
        font-size: 2rem;
        padding-top: .5rem
    }
}

.collapsable .collapse__content {
    margin-top: 1rem;
    font-size: 1.5rem;
    font-weight: 300
}

@media only screen and (max-width: 56.25em) {
    .collapsable .collapse__content {
        margin-top:1rem;
        font-size: 1.4rem
    }
}

@media only screen and (max-width: 37.5em) {
    .collapsable .collapse__content {
        margin-top:.5rem;
        font-size: 1.2rem
    }
}

.rotate-up {
    transform: rotate(180deg);
    transition: .2s ease-in-out
}

.custom-radio {
    position: relative
}

.custom-radio input[type=radio] {
    position: relative;
    z-index: 2;
    width: 3rem;
    height: 3rem;
    opacity: 0;
    cursor: pointer
}

.custom-radio input[type=radio]+span {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    top: 0;
    left: 0;
    background-color: #fff;
    content: "";
    display: inline-block;
    visibility: visible;
    border: 2px solid #c2c2c2;
    cursor: pointer;
    position: absolute;
    z-index: 1
}

.custom-radio input[type=radio]:checked+span {
    background-color: #fff;
    border: 1rem solid #60cc4d
}

.custom-form-control {
    display: inline-block;
    border: .15rem solid #c2c2c2;
    border-radius: .7rem;
    width: 100%;
    height: 5rem;
    padding: 1rem;
    font-size: 1.6rem;
    font-family: sans-serif;
    position: relative
}

.custom-form-control :active,.custom-form-control:focus {
    outline: 0;
    border-width: .2rem;
    border-color: #0040a8
}

.input-container {
    position: relative;
    display: block;
    text-align: right
}

.input-container small {
    text-align: left;
    padding: .5rem;
    font-size: 1.1rem;
    color: #e3242b;
    display: none
}

.input-container::after {
    font-family: "icons-bbogota";
    content: "";
    font-size: 3rem;
    color: #e3242b;
    height: 100%;
    position: absolute;
    top: calc(50% + 8px);
    transform: translateY(-50%);
    right: 10px
}

.input-container--error::after {
    content: "l"
}

.input-container--error small {
    display: block
}

.input-container--error .custom-form-control {
    border: 2px solid #e3242b;
    background-color: rgba(227,36,43,.1)
}

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10
}

@media only screen and (max-width: 75em) {
    .modal {
        padding-top:3rem;
        align-items: flex-start
    }
}

@media only screen and (max-width: 56.25em) {
    .modal {
        padding-top:2.5rem;
        align-items: flex-start
    }
}

@media only screen and (max-width: 37.5em) {
    .modal {
        padding-top:2.5rem;
        align-items: flex-start
    }
}

.modal__container {
    text-align: center;
    width: 90%;
    max-width: 60rem;
    background: #213f91;
    position: absolute;
    padding: 4rem 10rem 3rem;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px
}

@media only screen and (max-width: 37.5em) {
    .modal__container {
        width:90%;
        padding: 5rem
    }
}

.modal__container .modal-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fafafa;
    margin-bottom: 1.5rem
}

.modal__container .modal-title-xl {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-end
}

.modal__container .modal-text {
    font-size: 1.5rem;
    color: #fafafa;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    text-align: left
}

@media only screen and (max-width: 37.5em) {
    .modal__container .modal-text {
        font-size:1.3rem
    }
}

.modal__container .modal-input {
    margin-bottom: 2.5rem
}

.modal__container .modal-action {
    margin-bottom: 1.5rem
}

.modal__container .modal-img-container {
    width: 7rem;
    min-height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem
}

.modal__container .modal-img-container img,select {
    width: 100%
}

.close {
    position: absolute;
    font-size: 4rem;
    font-family: initial;
    top: .5rem;
    right: 1.5rem;
    color: #0040a8;
    cursor: pointer;
    font-weight: 100
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #213f91;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 5
}

.modal__loading {
    padding: 3rem;
    text-align: left
}

.modal__loading .spinner {
    margin-bottom: 2rem
}

select {
    height: 5rem;
    border: 1px solid #c2c2c2;
    font-size: 1.6rem;
    font-family: sans-serif;
    color: #959595;
    border-radius: .7rem;
    outline: 0;
    padding: 1rem .8rem;
    cursor: pointer
}

select :active,select :focus,select :target {
    background: gray;
    color: #fff
}

@media only screen and (max-width: 56.25em) {
    select {
        height:4.5rem;
        font-size: 1.5rem;
        padding: .8rem 1.2rem
    }
}

@media only screen and (max-width: 37.5em) {
    select {
        height:3.5rem;
        font-size: 1.4rem;
        padding: .5rem .8rem
    }
}

.spinner {
    position: relative;
    width: 50px;
    height: 50px;
    display: inline-block
}

.circularG {
    position: absolute;
    background-color: #0040a8;
    width: 11px;
    height: 11px;
    border-radius: 8px;
    -webkit-animation-name: bounce_circularG;
    animation-name: bounce_circularG;
    -webkit-animation-duration: .96s;
    animation-duration: .96s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: linear;
    animation-direction: linear
}

#circularG_1 {
    left: 0;
    top: 20px;
    -webkit-animation-delay: .36s;
    animation-delay: .36s
}

#circularG_2 {
    left: 5px;
    top: 5px;
    -webkit-animation-delay: .48s;
    animation-delay: .48s
}

#circularG_3 {
    top: 0;
    left: 20px;
    -webkit-animation-delay: .6s;
    animation-delay: .6s
}

#circularG_4 {
    right: 5px;
    top: 5px;
    -webkit-animation-delay: .72s;
    animation-delay: .72s
}

#circularG_5 {
    right: 0;
    top: 20px;
    -webkit-animation-delay: .84s;
    animation-delay: .84s
}

#circularG_6 {
    right: 5px;
    bottom: 5px;
    -webkit-animation-delay: .96s;
    animation-delay: .96s
}

#circularG_7 {
    left: 20px;
    bottom: 0;
    -webkit-animation-delay: 1.08s;
    animation-delay: 1.08s
}

#circularG_8 {
    left: 5px;
    bottom: 5px;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s
}

.container-pago {
    display: flex;
    flex-direction: column;
    background: #f6f8fa;
    width: 100%;
    min-height: 100vh
}

.container-pago__header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: #fff;
    position: relative
}

.container-pago__header .close-section {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 4rem;
    color: #0040a8;
    cursor: pointer;
    font-weight: 100
}

@media only screen and (max-width: 75em) {
    .container-pago__header .close-section {
        top:5px;
        font-size: 2.5rem
    }
}

@media only screen and (max-width: 56.25em) {
    .container-pago__header .close-section {
        top:5px;
        font-size: 2.5rem
    }
}

@media only screen and (max-width: 37.5em) {
    .container-pago__header .close-section {
        top:5px;
        font-size: 2.5rem
    }
}

.container-pago__header .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22%
}

@media only screen and (max-width: 75em) {
    .container-pago__header .image-container {
        width:70%
    }
}

@media only screen and (max-width: 56.25em) {
    .container-pago__header .image-container {
        width:70%
    }
}

@media only screen and (max-width: 37.5em) {
    .container-pago__header .image-container {
        width:100%
    }
}

.container-pago__header .image-container img {
    max-width: 100%;
    max-height: 100%
}

.container-pago__content {
    display: flex;
    flex-direction: row;
    justify-content: center
}

@media only screen and (max-width: 56.25em) {
    .container-pago__content {
        display:flex;
        flex-direction: column
    }
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content {
        display:flex;
        flex-direction: column
    }
}

.container-pago__content .info {
    padding: 6rem 2rem 0;
    width: 40rem
}

@media only screen and (max-width: 56.25em) {
    .container-pago__content .info {
        padding:1.5rem 1.5rem 0;
        margin: 0 auto
    }
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .info {
        width:100%;
        max-width: 40rem;
        padding: 1rem;
        margin: 0 auto
    }
}

.container-pago__content .info__title {
    font-family: "Monserrat",sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    text-align: center
}

.container-pago__content .info__card {
    display: flex;
    flex-direction: column;
    margin: 2rem 0 1rem;
    background: #fff;
    border-radius: .8rem;
    padding: 2.5rem
}

.container-pago__content .info__card--title {
    display: flex;
    width: 5%;
    font-size: 1.5rem;
    font-weight: 700;
    color: #333
}

.container-pago__content .info__card--price-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20%;
    border-radius: .8rem;
    background: #e3f3ff;
    margin-top: 1rem;
    padding: .5rem
}

@media only screen and (max-width: 56.25em) {
    .container-pago__content .info__card--price-holder {
        padding:1rem;
        height: 25%
    }
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .info__card--price-holder {
        display:flex;
        height: 30%
    }
}

.container-pago__content .info__card--price-holder .price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .info__card--price-holder .price {
        font-size:2rem
    }
}

.container-pago__content .info__card--price-holder .price-text {
    margin-top: .5rem;
    font-size: 1.5rem;
    color: #959595
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .info__card--price-holder .price-text {
        font-size:1.2rem;
        margin-top: .3rem
    }
}

.container-pago__content .info__card--detail-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 4rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    border-bottom: 2px solid rgba(194,194,194,.2)
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .info__card--detail-container {
        margin-top:.5rem
    }
}

.container-pago__content .info__card--detail-container .label {
    display: flex;
    flex: 0 1 auto;
    font-size: 1.4rem;
    color: #959595
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .info__card--detail-container .label {
        font-size:1.3rem
    }
}

.container-pago__content .info__card--detail-container .valor {
    display: flex;
    flex: 0 1 auto;
    align-items: flex-end;
    font-size: 1.5rem;
    color: #959595
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .info__card--detail-container .valor {
        font-size:1.3rem
    }
}

.container-pago__content .info__card--detail-reference-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 4rem;
    justify-content: space-between;
    align-items: center
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .info__card--detail-reference-container {
        height:2.5rem
    }
}

.container-pago__content .info__card--detail-reference-container .label {
    display: flex;
    flex: 0 1 auto;
    font-size: 1.4rem;
    color: #959595
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .info__card--detail-reference-container .label {
        font-size:1.3rem
    }
}

.container-pago__content .info__card--detail-reference-container .valor {
    display: flex;
    flex: 0 1 auto;
    align-items: flex-end;
    font-size: 1.5rem;
    color: #959595
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .info__card--detail-reference-container .valor {
        font-size:1.3rem
    }
}

.container-pago__content .seleccion {
    padding: 6rem 2rem 0;
    width: 40rem
}

@media only screen and (max-width: 56.25em) {
    .container-pago__content .seleccion {
        padding:1.5rem 1.5rem 0;
        margin: 0 auto
    }
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .seleccion {
        width:100%;
        max-width: 40rem;
        margin: 0 auto
    }
}

.container-pago__content .seleccion__card {
    display: flex;
    flex-direction: column;
    max-width: 37rem;
    margin-top: 4rem;
    border-radius: .8rem;
    padding: 2rem 1.5rem;
    position: relative
}

@media only screen and (max-width: 56.25em) {
    .container-pago__content .seleccion__card {
        margin:0 auto
    }
}

.container-pago__content .seleccion__card--title {
    font-family: "Monserrat",sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    text-align: center
}

.container-pago__content .seleccion__card--sub-title {
    display: flex;
    width: 100%;
    font-family: "Monserrat",sans-serif;
    font-size: 1.5rem;
    color: #959595;
    margin-top: 2.5rem
}

@media only screen and (max-width: 75em) {
    .container-pago__content .seleccion__card--sub-title {
        display:flex;
        justify-content: center
    }
}

@media only screen and (max-width: 56.25em) {
    .container-pago__content .seleccion__card--sub-title {
        display:flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        margin-top: 1.2rem
    }
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .seleccion__card--sub-title {
        display:flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin-top: .5rem
    }
}

.container-pago__content .seleccion__card .card-container {
    margin-top: 2.5rem;
    width: 100%;
    overflow: auto;
    max-height: 24rem
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .seleccion__card .card-container {
        margin-top:1.5rem;
        overflow: auto
    }
}

.container-pago__content .seleccion__card .card-container .internal-card {
    display: flex;
    background: #fff;
    margin-bottom: .3rem;
    padding: 1.5rem 0
}

.container-pago__content .seleccion__card .card-container .internal-card__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    padding-left: 1.5rem
}

.container-pago__content .seleccion__card .card-container .internal-card__text .main {
    display: flex;
    width: 100%;
    font-size: 1.6rem;
    font-weight: 700;
    color: #333
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .seleccion__card .card-container .internal-card__text .main {
        font-size:1.3rem
    }
}

.container-pago__content .seleccion__card .card-container .internal-card__text .sub-main {
    width: 100%;
    display: flex;
    font-size: 1.4rem;
    color: #959595
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .seleccion__card .card-container .internal-card__text .sub-main {
        font-size:1.1
    }
}

.container-pago__content .seleccion__card .card-container .internal-card__radio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10%;
    padding-right: 1rem
}

.container-pago__content .seleccion__card .bottom {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center
}

@media only screen and (max-width: 37.5em) {
    .container-pago__content .seleccion__card .bottom {
        display:flex;
        width: 100%;
        justify-content: center;
        align-items: center
    }
}

.no-border {
    border-bottom: none;
    margin-top: 1rem
}

.pago-exitoso-container {
    display: flex;
    flex-direction: column;
    background: #f6f8fa;
    width: 100%;
    min-height: 100vh
}

.pago-exitoso-container__header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: #fff;
    position: relative
}

.pago-exitoso-container__header .close-section {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 4rem;
    color: #0040a8;
    cursor: pointer;
    font-weight: 100
}

@media only screen and (max-width: 75em) {
    .pago-exitoso-container__header .close-section {
        top:5px;
        font-size: 2.5rem
    }
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__header .close-section {
        top:5px;
        font-size: 2.5rem
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__header .close-section {
        top:5px;
        font-size: 2.5rem
    }
}

.pago-exitoso-container__header .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22%;
    height: 100%
}

@media only screen and (max-width: 75em) {
    .pago-exitoso-container__header .image-container {
        width:70%
    }
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__header .image-container {
        width:70%
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__header .image-container {
        width:70%
    }
}

.container__login--header img,.pago-exitoso-container__header .image-container img {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.pago-exitoso-container__content {
    display: flex
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__content {
        display:flex;
        flex-direction: column
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content {
        display:flex;
        flex-direction: column
    }
}

.pago-exitoso-container__content .info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 50%;
    padding-top: 6rem;
    padding-left: 30rem
}

@media only screen and (max-width: 75em) {
    .pago-exitoso-container__content .info {
        padding-left:20rem
    }
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__content .info {
        width:100%;
        align-items: center;
        padding: 2rem
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .info {
        width:100%;
        align-items: center;
        padding: 2rem
    }
}

.pago-exitoso-container__content .info .icon {
    font-size: 3.5rem;
    color: #60cc4d
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__content .info .icon {
        font-size:3.5rem
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .info .icon {
        font-size:3rem
    }
}

.pago-exitoso-container__content .info .main {
    font-size: 2.3rem;
    color: #333;
    font-weight: 700;
    margin-top: 1rem
}

@media only screen and (max-width: 75em) {
    .pago-exitoso-container__content .info .main {
        font-size:2.3rem
    }
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__content .info .main {
        font-size:2.2rem;
        margin-top: 1rem
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .info .main {
        font-size:2rem;
        margin-top: .8rem
    }
}

.pago-exitoso-container__content .info .sub-main {
    font-size: 1.6rem;
    color: #333;
    font-weight: 500;
    margin-top: 1.5rem
}

@media only screen and (max-width: 75em) {
    .pago-exitoso-container__content .info .sub-main {
        font-size:1.6rem
    }
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__content .info .sub-main {
        font-size:1.5rem;
        margin-top: 1.3rem
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .info .sub-main {
        font-size:1.4rem;
        margin-top: 1.2rem
    }
}

.pago-exitoso-container__content .info .date {
    font-size: 1.3rem;
    color: #333;
    margin-top: 1rem
}

@media only screen and (max-width: 75em) {
    .pago-exitoso-container__content .info .date {
        font-size:1.3rem
    }
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__content .info .date {
        font-size:1.3rem;
        margin-top: 1rem
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .info .date {
        font-size:1.2rem;
        margin-top: .8rem
    }
}

.pago-exitoso-container__content .info .download-button {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    color: #0040a8;
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 5.5rem
}

.pago-exitoso-container__content .info .download-button i {
    font-size: 3rem;
    font-weight: 700
}

@media only screen and (max-width: 75em) {
    .pago-exitoso-container__content .info .download-button {
        margin-top:3rem
    }
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__content .info .download-button {
        justify-content:center;
        margin-top: 1.2rem
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .info .download-button {
        justify-content:center;
        margin-top: 1rem
    }
}

.pago-exitoso-container__content .detalle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 50%;
    padding: 6rem 2rem
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__content .detalle {
        width:100%;
        padding: 1rem;
        align-items: center
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle {
        width:100%;
        padding: 1rem;
        align-items: center
    }
}

.pago-exitoso-container__content .detalle__card {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    width: 50%;
    background: #fff;
    border-radius: .8rem;
    padding: 2.5rem
}

@media only screen and (max-width: 75em) {
    .pago-exitoso-container__content .detalle__card {
        width:80%
    }
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__content .detalle__card {
        width:75%;
        margin-top: .5rem;
        padding: 2rem
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle__card {
        width:95%;
        margin-top: .5rem;
        padding: 2rem
    }
}

.pago-exitoso-container__content .detalle__card--title {
    display: flex;
    width: 5%;
    font-size: 1.5rem;
    font-weight: 700;
    color: #333
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__content .detalle__card--title {
        font-size:1.7rem
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle__card--title {
        font-size:1.5rem
    }
}

.pago-exitoso-container__content .detalle__card--price-holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: .8rem;
    background: #e3f3ff;
    margin-top: 1rem;
    padding: 1rem
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__content .detalle__card--price-holder {
        padding:1.2rem
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle__card--price-holder {
        display:flex;
        padding: 1.4rem
    }
}

.pago-exitoso-container__content .detalle__card--price-holder .price {
    font-size: 3rem;
    font-weight: 700;
    color: #333
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle__card--price-holder .price {
        font-size:2rem
    }
}

.pago-exitoso-container__content .detalle__card--price-holder .price-text {
    margin-top: .5rem;
    font-size: 1.5rem;
    color: #959595
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle__card--price-holder .price-text {
        font-size:1.2rem;
        margin-top: .3rem
    }
}

.pago-exitoso-container__content .detalle__card--detail-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    border-bottom: 2px solid rgba(194,194,194,.2)
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle__card--detail-container {
        margin-top:.5rem
    }
}

.pago-exitoso-container__content .detalle__card--detail-container .label {
    display: flex;
    flex: 0 1 auto;
    font-size: 1.4rem;
    color: #959595
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle__card--detail-container .label {
        font-size:1.3rem
    }
}

.pago-exitoso-container__content .detalle__card--detail-container .valor {
    display: flex;
    flex: 0 1 auto;
    align-items: flex-end;
    font-size: 1.5rem;
    color: #959595
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle__card--detail-container .valor {
        font-size:1.3rem
    }
}

.pago-exitoso-container__content .detalle__card--detail-reference-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle__card--detail-reference-container {
        height:2.5rem
    }
}

.pago-exitoso-container__content .detalle__card--detail-reference-container .label {
    display: flex;
    flex: 0 1 auto;
    font-size: 1.4rem;
    color: #959595
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle__card--detail-reference-container .label {
        font-size:1.3rem
    }
}

.pago-exitoso-container__content .detalle__card--detail-reference-container .valor {
    display: flex;
    flex: 0 1 auto;
    align-items: flex-end;
    font-size: 1.5rem;
    color: #959595
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle__card--detail-reference-container .valor {
        font-size:1.3rem
    }
}

.pago-exitoso-container__content .detalle .bottom {
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center
}

@media only screen and (max-width: 75em) {
    .pago-exitoso-container__content .detalle .bottom {
        width:80%
    }
}

@media only screen and (max-width: 56.25em) {
    .pago-exitoso-container__content .detalle .bottom {
        width:75%
    }
}

@media only screen and (max-width: 37.5em) {
    .pago-exitoso-container__content .detalle .bottom {
        display:flex;
        width: 95%;
        justify-content: center;
        align-items: center
    }
}

*,::after,::before {
    margin: 0;
    padding: 0;
    /* box-sizing: border-box; */
}

html {
    font-size: 70%
}

body {
    font-family: "Monserrat",sans-serif;
    height: 100vh;
    position: relative
}

.box-container {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 2rem;
    background: #eee
}

@media only screen and (max-width: 75em) {
    .box-container {
        padding:0;
        background: #f6f8fa
    }
}

@media only screen and (max-width: 56.25em) {
    .box-container {
        padding:0
    }
}

@media only screen and (max-width: 37.5em) {
    .box-container {
        padding:0
    }
}

.container {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 90%;
    max-width: 170rem;
    height: 100%;
    min-height: calc(100vh - 40px);
    box-shadow: 0 .1rem .7rem 0 rgba(0,0,0,.17)
}

@media only screen and (max-width: 75em) {
    .container {
        width:100%;
        min-height: 100vh
    }
}

@media only screen and (max-width: 56.25em) {
    .container {
        flex-direction:column
    }
}

@media only screen and (max-width: 37.5em) {
    .container {
        flex-direction:column
    }
}

.container__water-mark {
    background: #f6f8fa;
    position: relative;
    width: 4rem
}

@media only screen and (max-width: 75em) {
    .container__water-mark {
        align-items:center
    }
}

@media only screen and (max-width: 56.25em) {
    .container__water-mark {
        display:none
    }
}

@media only screen and (max-width: 37.5em) {
    .container__water-mark {
        display:none
    }
}

.container__water-mark--image-container {
    position: absolute;
    bottom: 4rem;
    left: 5px;
    width: 4rem;
    height: 21rem;
    background-image: url(../assets/images/vigilado.jpg);
    background-repeat: no-repeat
}

.container__login {
    background: #f6f8fa;
    position: relative;
    width: 50%;
    padding: 0 8rem 3rem
}

@media only screen and (max-width: 56.25em) {
    .container__login {
        padding:0;
        width: 100%;
        max-width: 40rem;
        margin: auto
    }
}

.container__login--close {
    display: none
}

@media only screen and (max-width: 56.25em) {
    .container__login--close {
        display:block;
        position: absolute;
        color: #0040a8;
        top: .2rem;
        right: 1.5rem;
        font-size: 3rem;
        font-weight: 100
    }
}

.container__login--header {
    display: flex;
    width: 60%;
    font-size: 2rem;
    margin-top: 2.5rem
}

@media only screen and (max-width: 56.25em) {
    .container__login--header {
        margin:1.7rem auto 0;
        justify-content: center
    }
}

.container__login--title {
    font-family: "Monserrat",sans-serif;
    font-weight: 500;
    font-size: 3rem;
    color: #0040a8;
    margin: 2rem 0 3rem
}

@media only screen and (max-width: 56.25em) {
    .container__login--title {
        text-align:center;
        font-size: 2rem
    }
}

.container__login--login-box {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    justify-self: center;
    padding: 2.5rem 2rem;
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 0 .6rem 0 rgba(0,0,0,.15);
    margin-bottom: 1rem
}

@media only screen and (max-width: 56.25em) {
    .container__login--login-box {
        margin-bottom:3rem
    }
}

.container__login--login-box-title {
    display: flex;
    align-self: flex-start;
    font-family: "Monserrat",sans-serif;
    font-size: 1.3rem;
    margin-bottom: 2rem;
    color: #333;
    font-weight: 550
}

.container__login--login-box-id {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    justify-self: center;
    padding: 2.5rem 2rem;
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 0 .6rem 0 rgba(0,0,0,.15);
    margin-bottom: 1rem
}

@media only screen and (max-width: 56.25em) {
    .container__login--login-box-id {
        margin:0 auto 2rem
    }
}

.container__login--login-box-id-title {
    display: flex;
    align-self: flex-start;
    font-family: "Monserrat",sans-serif;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #333;
    font-weight: 550
}

.container__login--login-box-validacion {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    justify-self: center;
    padding: 4rem 3rem;
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 0 .6rem 0 rgba(0,0,0,.15);
    margin-bottom: 1rem
}

@media only screen and (max-width: 75em) {
    .container__login--login-box-validacion {
        margin-top:4rem
    }
}

@media only screen and (max-width: 56.25em) {
    .container__login--login-box-validacion {
        align-self:center;
        margin: 0 auto 1rem
    }
}

.container__login--login-box-validacion-title {
    display: flex;
    align-self: flex-start;
    font-family: "Monserrat",sans-serif;
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    color: #333;
    font-weight: 550
}

.container__info {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #edf7ff;
    width: 50%;
    position: relative
}

@media only screen and (max-width: 56.25em) {
    .container__info {
        width:100%;
        max-width: 40rem;
        margin: auto
    }
}

@media only screen and (max-width: 37.5em) {
    .container__info {
        width:100%
    }
}

.container__info--close {
    position: absolute;
    display: block;
    top: 2rem;
    right: 2.5rem;
    color: #fff;
    font-size: 4rem;
    cursor: pointer;
    font-weight: 100
}

@media only screen and (max-width: 56.25em) {
    .container__info--close {
        display:none
    }
}

.container__info--tips,.label {
    font-family: "Monserrat",sans-serif
}

.container__info--tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: auto
    
}

.label {
    font-size: 1.3rem;
    color: #333;
    font-weight: 500;
    margin-bottom: 1.2rem;
    margin-top: .7rem
}

.fields-container {
    display: flex;
    width: 100%
}

@media only screen and (max-width: 56.25em) {
    .fields-container {
        flex-direction:column;
        margin-top: 1rem
    }
}

@media only screen and (max-width: 37.5em) {
    .fields-container {
        flex-direction:column;
        margin-top: .6rem
    }
}

.fields-container .field-1 {
    width: 35%;
    margin-right: .5rem
}

@media only screen and (max-width: 56.25em) {
    .fields-container .field-1 {
        width:100%;
        margin-right: 0
    }
}

@media only screen and (max-width: 37.5em) {
    .fields-container .field-1 {
        width:100%;
        margin-right: 0
    }
}

.fields-container .field-2 {
    width: 65%;
    margin-left: .5rem
}

@media only screen and (max-width: 56.25em) {
    .fields-container .field-2 {
        width:100%;
        margin-left: 0
    }
}

@media only screen and (max-width: 37.5em) {
    .fields-container .field-2 {
        width:100%;
        margin-left: 0
    }
}

.split-fields {
    display: flex
}

.split-fields .field-1 .image-container {
    width: 13rem;
    height: 13rem;
    border: 1px solid #959595;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .4rem
}

.split-fields .field-2 {
    padding-left: 1.5rem
}

.divisor {
    margin: 2rem 0;
    border: 1px solid #eee
}

.container-error_tecnico__content--button_container .btn-main,.custom-input {
    width: 100%
}

.checkbox-container {
    display: flex;
    text-align: left;
    margin-bottom: 1rem
}

.checkbox-container label {
    font-size: 1.6rem;
    line-height: 2.5rem;
    margin-left: 2rem
}

.custom-checkbox {
    position: relative;
    width: 3rem;
    height: 3rem
}

.custom-checkbox input[type=checkbox] {
    width: 3rem;
    height: 3rem;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer
}

.custom-checkbox input[type=checkbox]+span {
    border: 2px solid #c2c2c2;
    background-color: #fff;
    width: 3rem;
    height: 3rem;
    border-radius: 7px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem
}

.custom-checkbox input[type=checkbox]+span i {
    display: inline-flex;
    color: #fff
}

.custom-checkbox input[type=checkbox]:checked+span {
    background-color: #60cc4d;
    border-color: #60cc4d
}

.btn-container {
    margin-top: 3rem;
    text-align: center
}

@media only screen and (max-width: 37.5em) {
    .btn-container {
        margin-top:1.5rem
    }
}

.hidden {
    display: none
}

.container-error_tecnico__content--button_container {
    padding: 1rem 0
}

.tooltip-container {
    padding-bottom: .5rem;
    position: relative
}

.tooltip-container.icon-info {
    font-size: 2rem;
    margin-left: .5rem;
    color: #0040a8;
    cursor: pointer
}

.tooltip-container .tooltip {
    position: absolute;
    bottom: calc(100% + 1rem);
    left: -.8rem;
    display: none;
    font-style: normal;
    font-weight: 300;
    justify-content: center;
    background: #0040a8;
    border-radius: 8px;
    color: #fff;
    content: "";
    font-size: 1.4rem;
    padding: 1.5rem;
    width: 30rem;
    text-align: left;
    line-height: 20px
}

.tooltip-container .tooltip:before {
    border: solid;
    border-color: #0040a8 transparent;
    border-width: 8px 8px 0;
    content: "";
    left: 1rem;
    bottom: -7px;
    position: absolute
}

.tooltip-container:hover .tooltip {
    display: flex
}

.overflow-initial {
    overflow: initial!important
}

.toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    padding: 2rem 3rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    background-color: #ffeeba;
    color: #856404
}

.toast.hidden {
    display: none
}

.toast p {
    font-size: 1.8rem
}

.toast p strong {
    margin-right: 1rem
}

.toast .icon-close-search-r {
    color: #856404;
    font-size: 2.2rem;
    display: inline-flex;
    cursor: pointer
}

.container-timeElapsed {
    width: 80rem;
    margin: 0 auto;
    padding: 0 2rem
}

@media only screen and (max-width: 56.25em) {
    .container-timeElapsed {
        width:40rem
    }
}

@media only screen and (max-width: 37.5em) {
    .container-timeElapsed {
        width:100%;
        max-width: 40rem;
        padding: 1rem
    }
}

.timeElapsed {
    font-size: 1.4rem;
    color: #a0a0a0
}

@media only screen and (max-width: 37.5em) {
    .timeElapsed {
        padding:1rem
    }
}

.container-error_tecnico {
    display: flex;
    flex-direction: column;
    background: #f6f8fa;
    width: 100%;
    height: 100vh
}

.container-error_tecnico__header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: #fff;
    position: relative
}

.container-error_tecnico__header .close-section {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 3rem;
    color: #0040a8;
    cursor: pointer
}

@media only screen and (max-width: 75em) {
    .container-error_tecnico__header .close-section {
        top:5px;
        font-size: 2.5rem
    }
}

@media only screen and (max-width: 56.25em) {
    .container-error_tecnico__header .close-section {
        top:5px;
        font-size: 2.5rem
    }
}

@media only screen and (max-width: 37.5em) {
    .container-error_tecnico__header .close-section {
        top:5px;
        font-size: 2.5rem
    }
}

.container-error_tecnico__header .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22%
}

@media only screen and (max-width: 75em) {
    .container-error_tecnico__header .image-container {
        width:70%
    }
}

@media only screen and (max-width: 56.25em) {
    .container-error_tecnico__header .image-container {
        width:70%
    }
}

@media only screen and (max-width: 37.5em) {
    .container-error_tecnico__header .image-container {
        width:70%
    }
}

.container-error_tecnico__header .image-container img,.container-token_activado__header .image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover
}

.container-error_tecnico__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 10rem;
    font-family: "Monserrat",sans-serif
}

@media only screen and (max-width: 56.25em) {
    .container-error_tecnico__content {
        padding:2.5rem 2rem
    }
}

.container-error_tecnico__content--title {
    display: block;
    font-weight: 300;
    margin-bottom: 2rem
}

@media only screen and (max-width: 56.25em) {
    .container-error_tecnico__content--title {
        font-size:1rem;
        text-align: center
    }
}

.container-error_tecnico__content--subtitle {
    display: block;
    font-size: 1.8rem;
    color: #e3242b;
    margin-bottom: 3rem
}

@media only screen and (max-width: 56.25em) {
    .container-error_tecnico__content--subtitle {
        text-align:center
    }
}

.container-error_tecnico__content--text {
    display: block;
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 5rem
}

@media only screen and (max-width: 56.25em) {
    .container-error_tecnico__content--text {
        font-size:1.4rem
    }
}

.container-error_tecnico__content--button_container {
    display: block;
    width: 30%;
    margin: 0 auto
}

@media only screen and (max-width: 56.25em) {
    .container-error_tecnico__content--button_container {
        width:50%
    }
}

@media only screen and (max-width: 37.5em) {
    .container-error_tecnico__content--button_container {
        width:70%
    }
}

.container-token_activado {
    display: flex;
    flex-direction: column;
    background: #f6f8fa;
    width: 100%;
    height: 100vh
}

.container-token_activado__header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: #fff;
    position: relative
}

.container-token_activado__header .close-section {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 3rem;
    color: #0040a8;
    cursor: pointer
}

@media only screen and (max-width: 75em) {
    .container-token_activado__header .close-section {
        top:5px;
        font-size: 2.5rem
    }
}

@media only screen and (max-width: 56.25em) {
    .container-token_activado__header .close-section {
        top:5px;
        font-size: 2.5rem
    }
}

@media only screen and (max-width: 37.5em) {
    .container-token_activado__header .close-section {
        top:5px;
        font-size: 2.5rem
    }
}

.container-token_activado__header .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22%
}

@media only screen and (max-width: 75em) {
    .container-token_activado__header .image-container {
        width:70%
    }
}

@media only screen and (max-width: 56.25em) {
    .container-token_activado__header .image-container {
        width:70%
    }
}

@media only screen and (max-width: 37.5em) {
    .container-token_activado__header .image-container {
        width:70%
    }
}

.container-token_activado__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 10rem;
    font-family: "Monserrat",sans-serif
}

@media only screen and (max-width: 56.25em) {
    .container-token_activado__content {
        padding:2.5rem 2rem
    }
}

.container-token_activado__content--title {
    display: block;
    font-weight: 500;
    font-size: 3rem;
    color: #0040a8;
    margin: 2rem 0 3rem
}

@media only screen and (max-width: 56.25em) {
    .container-token_activado__content--title {
        font-size:2rem;
        text-align: center
    }
}

.container-token_activado__content--text {
    font-size: 1.6rem;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    line-height: 1.5;
    margin-bottom: 5rem
}

@media only screen and (max-width: 56.25em) {
    .container-token_activado__content--text {
        font-size:1.4rem
    }
}

.container-token_activado__content--button_container {
    display: block;
    width: 30%;
    margin: 0 auto
}

@media only screen and (max-width: 56.25em) {
    .container-token_activado__content--button_container {
        width:50%
    }
}

@media only screen and (max-width: 37.5em) {
    .container-token_activado__content--button_container {
        width:70%
    }
}

.container-token_activado__content--button_container {
    padding: 1rem 0
}

.container-token_activado__content--button_container .btn-main {
    width: 100%
}